<!DOCTYPE html>																																																							
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript06브라우저객체2</title>
	</head>
	<body>
		<h1>06 브라우저 객체 DOM</h1>
		<h3>history</h3>
		<p>브라우저 방문기록을 담고 있는 객체</p>
		<p>history.length : 방문기록 총 수</p>
		<p>history.forward() : 방문기롱 중 앞 주소로 이동
			<button type="button" onclick="go2for();">앞으로</button></p>
		<p>history.back() : 방문기롱 중 이전 주소로 이동
			<button type="button" onclick="go2back();">뒤로</button></p>
		<p>history.go() : 방문기롱 중 특정 주소로 이동
			<button type="button" onclick="go2go();">뒤로 3페이지 이동</button></p>
		
		<script type="text/javascript">
			document.write(history.length);
			function go2for(){ history.forward(); }
			function go2back(){	history.back();	}
			function go2go(){ history.go(-3); }
		</script>
		
		<hr />
		<h3>타이밍 제어</h3>
		<p>자바스크립트를 통해 특정시간 간격으로 코드(함수)를 실행할 수 있음</p>
		<p>setTimeout(함수이름, 1/1000초) : 지정한 시간이 지난 후에 코드를 한번만 실행, 해제시 clearTimeout 사용</p>
		<p>setInterval(함수이름, 1/1000초) : 지정한 시간이 지난 때마다 코드를 주기적으로 실행, 해제시 clearInterval 사용</p>
		<p id="todays" style="color: red; font-style: italic;"> </p>
		<button type="button" onclick="stopTime();">시계 멈추기</button>
		
		<script type="text/javascript">
			function showTime(){
				var today = new Date();
				var times = today.toLocaleTimeString();
				var dates = today.toLocaleDateString();
				//document.write(dates + " " + times + "<br />");
				document.getElementById("todays").innerHTML = dates + " " + times;
			}
			showTime();
			var time1 = setTimeout("showTime()", 5000);
			var time2 = setInterval("showTime()", 1000);
			function stopTime(){
				clearTimeout(time1);
				clearInterval(time2);
			}			
		</script>
		                                                               
		<hr />
		<h3>쿠키 제어</h3>
		<p>방문자 정보를 웹페이지 내에 저장할 수 있게 해줌</p>
		<p>쿠키는 컴퓨터에 저장되는 작은 텍스트 데이터를 의미</p>
		<p>웹 서버에서 브라우저로 웹페이지가 전송되고 나면 서버와 브라우저간의 연결은 끊어짐</p>
		<p>이렇게 되면 서버는 접속한 사용자에 대한 모든 정보를 잃어버리게 됨(HTTP의 단점 : stateless)</p>
		<p>하지만 쿠키를 이용하면 이러한 문제는 해결됨</p>
		<p>사용자가 사이트를 방문하면 쿠키에 그의 이름이 저장됨</p>
		<p>사용자가 그 다음에 사이트를 또 방문하면 쿠키를 통해 그의 이름이 기억함</p>
		<p>쿠키에 저장되는 정보는 '이름=값'형태</p>
		<p>JSP에서는 세션을 이용해서 사용자들을 구분함</p>
		<p>document.cookie : 쿠키생성</p>
		<p>username : 방문자 이름을 의미하는 속성</p>
		<p>expires : 쿠키 유지 시간</p>
		<p>path : 쿠키 생성 위치</p>
		<p>domain : 쿠키 생성 도메인 주소</p>
		<p>document.cookie="username=수지; expires=날짜; path=/"</p>
		<p>쿠키삭제는 유효시간을 지정한 시간보다 한참 이전으로 되돌려서 설정할 것</p>
		
		<script type="text/javascript">
			var name1 = "username=수지;";
			var name2 = "kor=98;";
			var name3 = "eng=98;";
			var name4 = "mat=98;";
			var expdate = new Date();			
			expdate.setTime(expdate.getTime() + (60*60*24*1000));
			expdate = "expires=" + expdate.toGMTString();			
			var path = ";path=/";
			document.cookie = name1 + expdate + path;
			document.cookie = name2 + expdate + path;
			document.cookie = name3 + expdate + path;
			document.cookie = name4 + expdate + path;			
		</script>
		<script type="text/javascript">
			var cookies = document.cookie.split(";");
			alert("쿠키 항목 갯수 : " + cookies.length);
			for (var i=0, j=cookies.length; i<j; ++i){
				if(cookies[i].indexOf("username")>-1){
					name = cookies[i].substring("username".length+1, cookies[i].length);
				}
				if(cookies[i].indexOf("kor")>-1){
					kor = cookies[i].substring("kor".length+2, cookies[i].length);
				}
				if(cookies[i].indexOf("eng")>-1){
					eng = cookies[i].substring("eng".length+2, cookies[i].length);
				}
				if(cookies[i].indexOf("mat")>-1){
					mat = cookies[i].substring("mat".length+2, cookies[i].length);
				}
			}
			document.write(name + kor + eng + mat);
		</script>
		<script type="text/javascript">
			expdate = new Date(1970,1,1,0,0,0);
			/*
			document.cookie = name1 + expdate + path;
						document.cookie = name2 + expdate + path;
						document.cookie = name3 + expdate + path;
						document.cookie = name4 + expdate + path;*/
			
		</script>
		
	</body>
</html>
